<template>
	<view :class="['content',toggleTheme()]">
		<view class="login-form">
			<view style="margin-bottom: 1rem;">
				<!-- <text class="login-title">{{title}}</text> -->
				<image style="height: 46rpx;width:300rpx ;" :src="titleImgMer" mode="" v-if="isMch"></image>
				<image style="height: 46rpx;width:332rpx ;" :src="titleImgAgent" mode="" v-else></image>
			</view>
			<view class="m-b-12">
				<u-row gutter="0">
					<u-col span="6">
						<u-button @click="change" size="mini" :hair-line="false">
							<u-icon name="shuaxin" custom-prefix="custom-icon" style="padding-right: 20rpx;" />
							{{ isMch ? '切换代理商平台登录' : '切换商户平台登录'}}
						</u-button>
					</u-col>
				</u-row>
			</view>
			<u-form :model="loginForm" ref="loginFormRef" :border-bottom='false' label-position='top'
				:label-style="labelStyle">
				<u-row gutter="16">
					<u-col span="12">
						<u-form-item label="用户名" prop="loginName">
							<u-input v-model="loginForm.loginName" placeholder="请输入用户名" />
						</u-form-item>
					</u-col>
					<u-col span="12">
						<u-form-item label="密码" prop="pwd">
							<u-input v-model="loginForm.pwd" type='password' placeholder="请输入密码（至少3种字符，最短8位）"
								:password-icon='true' />
						</u-form-item>
					</u-col>
					<u-col span="7">
						<u-form-item label="验证码" prop="captchaCode">
							<u-input v-model="loginForm.captchaCode" placeholder="请输入验证码" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item label="　" prop="intro">
							<view class="" style="border-radius: 16rpx; overflow: hidden;">
								<u-image height="96rpx" width="240rpx" :src="captchaBase64Image"
									@click="getCaptcha"></u-image>
							</view>
						</u-form-item>
					</u-col>
					<u-col span="12">
						<view class="p-t-6">
							<u-checkbox-group @change="radioGroupChange" shape='circle'>
								<u-checkbox @change="radioChange" v-model="agreement" :name="true">
									<text class='agreementBox'>
										我已阅读并同意
										<text class='main-color'>《用户服务协议》</text>
										与
										<text class='main-color'>《隐私政策》</text>
									</text>
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</u-col>
				</u-row>
			</u-form>
			<view class="p-t-12">
				<u-row gutter="0">
					<u-col span="12">
						<u-button @click="onLogin" size='medium' class="submit" :disabled="!agreement">登录</u-button>
					</u-col>
					<u-col span="12">
						<view class="warning-color flex justify-content wjmm"
							@click="$System.goTo('/pages/login/texting')">
							忘记密码?
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="foot">
			<foot-box></foot-box>
		</view>
		<!-- <u-image width="300rpx" height="300rpx" :src="src[0]"></u-image> -->
	</view>
</template>

<script setup>
	import {
		toggleTheme
	} from '@/stores/themeStore.js';
	import {
		reactive,
		toRefs,
		ref,
		computed,
		getCurrentInstance,
		nextTick,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	const commonStore = useCommonStore()
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		loginApi
	} from '@/common/api/login/index.js'
	const userStore = useUserStore()
	const {
		proxy
	} = getCurrentInstance()

	const labelStyle = ref({
		fontSize: '28rpx',
		color: 'rgba(153, 153, 153, 1)'
	})
	const captchaBase64Image = ref('')
	const infoForm = {
		userType: userStore.userType || '2',
		lDeviceType: 3, //h5
		loginName: '',
		pwd: '',
		captchaCode: '',
		captchaUuid: '',
	}
	const loginFormRef = ref()
	const loginForm = ref(infoForm)
	const rules = ref({
		userType: [{
			required: true,
			message: '用户类型不能为空'
		}],
		loginName: [{
			required: true,
			message: '用户名不能为空'
		}],
		pwd: [{
			required: true,
			message: '密码不能为空'
		}],
		captchaCode: [{
			required: true,
			message: '验证码不能为空'
		}],
	})

	const isMch = ref(false)
	const title = computed(() => {
		return isMch.value ? '商户平台登录' : '代理商平台登录'
	})
	const titleImgMer = '/static/images/mer_login_title.svg'
	const titleImgAgent = '/static/images/agent_login_title.svg'

	function change() {
		isMch.value = !isMch.value
		loginForm.value.userType = isMch.value ? 4 : 2
		userStore.setUserType(loginForm.value.userType)
		getCaptcha()
		toggleTheme()
	}

	// 验证码
	async function getCaptcha() {
		try {
			let captchaResult = await loginApi.getCaptcha()
			captchaBase64Image.value = captchaResult.data.captchaBase64Image
			loginForm.value.captchaUuid = captchaResult.data.captchaUuid
		} catch (e) {
			console.log('e==>', e)
		}
	}
	// 协议阅读
	const agreement = ref()

	// 登录
	async function onLogin() {
		loginFormRef.value.validate(async (valid) => {
			if (!valid) return
			try {
				console.log('loginForm.value', loginForm.value);
				const res = await loginApi.login(loginForm.value)
				if (res.code !== 200) return
				//更新用户信息到pinia
				useUserStore().setUserLoginInfo(res.data)
				useUserStore().setToken(res.data.token ?? '')
				useUserStore().setMenus()
				if (useUserStore().userType == 2) {
					proxy.$System.goTo('/pages/home/index', {}, {
						method: 'reLaunch'
					})
				} else if (useUserStore().userType != 2) {
					console.log('222');
					proxy.$System.goTo('/pages/mch-home/index', {}, {
						method: 'reLaunch'
					})
				}
			} catch (e) {
				loginForm.value.captchaCode = ''
			} finally {
				getCaptcha()
			}
		})
	}
	watch(() => userStore.userType, () => {
		isMch.value = userStore.userType == '4'
	}, {
		immediate: true
	})
	onLoad((option) => {
		uni.setNavigationBarColor({
			frontColor: '#000000', // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: '#f0f7ff' // 导航栏背景颜色
		});
	})
	onReady(() => {
		getCaptcha()
		nextTick(() => {
			loginFormRef.value?.setRules(rules.value);
		})
	})
</script>

<style>
	page {
		background: linear-gradient(180deg, rgba(240, 247, 255, 1) 0%, rgba(246, 247, 248, 1) 100%) !important;
	}
</style>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.login-form {
		flex-grow: 1;
	}

	.login-form :deep(.u-btn--default) {
		font-size: 28rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		height: 72rpx;
		border-color: rgba(255, 255, 255, 1) !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	.login-title {
		color: var(--maiColor);
		font-size: 48rpx;
		font-weight: 600;
	}

	.agreementBox {
		font-size: 24rpx;
	}

	.login-form :deep(.u-input) {
		background-color: #ffffff;
		padding: 12rpx !important;
		border-radius: 16rpx;
	}

	.login-form :deep(.u-form-item) {
		padding: 10rpx 0;
	}

	:deep(.u-radio__icon-wrap--checked),
	:deep(.u-checkbox__icon-wrap--checked) {
		background-color: var(--maiColor) !important;
		border-color: var(--maiColor) !important;
	}

	.submit :deep(.u-btn),
	.submit.u-btn {
		margin-top: 20rpx;
		width: 100% !important;
		background-color: var(--maiColor) !important;
		color: #ffffff !important;
	}

	.submit :deep(.u-btn--default--disabled),
	.submit.u-btn--default--disabled {
		opacity: 0.6;
	}

	.wjmm {
		margin-top: .5rem;
	}
</style>